<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
         客户端的存储
            1. cookie
            2. localStorage 本地存储
            3. sessionStorage 会话存储

            localStorage 和 sessionStorage 的区别：
                1. localStorage 存储的数据没有过期时间，sessionStorage 存储的数据在会话结束后就会被清除
                2. localStorage 存储的数据可以在同一个浏览器的不同页面之间共享，sessionStorage 存储的数据不能在同一个浏览器的不同页面之间共享
                3. localStorage 存储的数据可以在同一个浏览器的不同标签页之间共享，sessionStorage 存储的数据不能在同一个浏览器的不同标签页之间共享
                4. localStorage 存储的数据大小为 5M，sessionStorage 存储的数据大小为 5M
                5. localStorage 和 sessionStorage 都是以键值对的形式存储数据
                6. localStorage 和 sessionStorage 都是同源的，不能跨域访问
                7. localStorage 和 sessionStorage 都是同步的，不是异步的
                8. localStorage 和 sessionStorage 都是只能存储字符串类型的数据，不能存储对象类型的数据
            



         */
      // JS 操作 cookie
      // 设置 cookie
      //   document.cookie = "name=zs";
      //   document.cookie = "pk=123";

      // 获取cookie
      //   console.log(document.cookie);

      //   // 设置值
      localStorage.setItem("name", "zs");
      localStorage.setItem("age", 18);

      //   // 获取值
      //   localStorage.getItem("name");

      //   // 删除值
      //   localStorage.removeItem("name");

      //   // 清空值
      //   localStorage.clear();

      // 设置值
      sessionStorage.setItem("name", "ls");
      sessionStorage.setItem("age", 20);

      //   // 获取值
      //   sessionStorage.getItem("name");

      //   // 删除值
      //   sessionStorage.removeItem("name");

      //   // 清空值
      //   sessionStorage.clear();
    </script>
  </body>
</html>
